<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单提交
        1. 点击提交时先获取数据  user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com

        2. 提交数据到指定url 数据和url之间用?分隔
        http://127.0.0.1:5500/day14/html/login.html?user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com
    
    -->
    <!-- <form action="./login.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form> -->
    <!-- JS提交 -->
    <div>
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" class="btn" value="提交">
        </div>
    </div>
</body>
<script>

    // JS提交
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var phoneInp = document.getElementsByName("phone")[0];
    var emailInp = document.getElementsByName("email")[0];
    var btn = document.getElementsByClassName("btn")[0];


    btn.onclick = function(){
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // JS跳转 在页面跳转的同时可以携带一定的数据
        location.href = `./login.html?user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`;
    }




</script>
</html>